<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue.2.5.1.js"></script>
</head>

<body>
    <div id="app">
        {{message}}
        <component-a></component-a>
    </div>
    <script>
        //【1】子传父【在子组件的methods中访问父组件并更改父组件的data】

        // 尽管 vue 允许这样操作，但在业务中,子组件应该尽可能地避免依赖父组件的数据，更不应
        // 该去主动修改它的数据，因为这样使得父子组件紧藕合，只看父组件，很难理解父组件的状态，因
        // 为它可能被任意组件修改 理想情况下，只有组件自己能修改它的状态。父子组件最好还是通过
        // props和$emit 来通信。
        Vue.component('component-a', {
            template: '<button @click="handleEvent">通过父链直接修改数</button>',
            methods: {
                handleEvent() {
                    // 访问到父链后，可以做任何操作，比如直接修改数据
                    this.$parent.message = '来自组件component-a的内容'
                }
            }
        });
        var app = new Vue({
            el: '#app',
            data: {
                message: '1'
            }
        })
    </script>
</body>

</html>